<template>
    <div>
        <el-input
                v-model="name"
                style="width: 30%;"
                placeholder="请输入用户名搜索"
        >
        </el-input>
        <el-button @click.prevent="findAll()">搜索</el-button>


        <el-table
                :data="tableData"
                style="width: 100%"
                border
                :header-cell-style="{textAlign: 'center'}"
                :cell-style="{ textAlign: 'center' }">
            <el-table-column
                    label="标题"
                    prop="dynamicTitle">
            </el-table-column>
            <el-table-column
                    label="创建时间"
                    prop="createTime">
            </el-table-column>
            <el-table-column
                    label="作者"
                    prop="userName"
                      >
            </el-table-column>


            <el-table-column
                    label="内容"
                   >
                <template slot-scope="props">
                    <el-popover
                            placement="bottom"
                            title="文章内容"
                            width="200"
                            trigger="hover"
                            >
                        <span>{{ props.row.contentText }}</span>
                        <el-button slot="reference">查看全文</el-button>
                    </el-popover>
                </template>
            </el-table-column>


            <el-table-column
                    label="浏览量"
                    prop="viewNumber">
            </el-table-column>
            <el-table-column
                    label="状态"
                    prop="status">
            </el-table-column>
            <el-table-column
                    label="文章类型"
                    prop="plateId">
            </el-table-column>

            <el-table-column
                    label="封面"
                    prop="dynamicCover">
            </el-table-column>


            <el-table-column
                    align="right"

                    label="操作"
            >
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click.prevent="makePriority(scope.row.dynamicId)">置顶</el-button>

                    <el-button
                            size="mini"
                            @click.prevent="delete1(scope.row.dynamicId)">删除</el-button>
                </template>


            </el-table-column>
        </el-table>



        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10 , 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
        ></el-pagination>
    </div>


</template>

<script>
    export default {
       data(){
           return{
               name:"",
               tableData: [],
               name:null,
               pageNum:1,
               pageSize:5,
               total:0,
               prePage:1,
               nextPage:1,
               pages:0,
               visible: false

           }
       },methods:{
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.findAll();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.findAll();
            },
            makePriority(id){
                let url=this.$baseUrl+"/dynamic/update?dynamicId="+id
                this.axios.put(url).then((data)=>{
                    if (data.data.code==200){
                        this.$message.success(data.data.message)
                    }else {
                        this.$message.error(data.data.message)
                    }
                    this.findAll()
                })
            },
            delete1(id){
                if (confirm("是否确认删除？")){
                    let url=this.$baseUrl+"/dynamic/delete?dynamicId="+id
                    this.axios.delete(url).then((data)=>{
                        if (data.data.code==200){
                            this.$message.success(data.data.message)
                        }else {
                            this.$message.error(data.data.message)
                        }
                        this.findAll()
                    })
                }
            },
            findAll(){
                let url=this.$baseUrl+"/dynamic/findAll"
                this.axios.get(url,{
                    params:{
                        name:this.name,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                    }
                }).then((data)=>{
                    this.tableData=data.data.data.list;
                    this.pageNum=data.data.data.pageNum;
                    this.total = data.data.data.total;
                    this.prePage = data.data.data.prePage;
                    this.nextPage = data.data.data.nextPage;
                    this.pages=data.data.data.pages;
                    this.pageSize=data.data.data.pageSize;
                    console.log(this.tableData)

                    for (let i=0;i<this.tableData.length;i++){

                        this.tableData[i].status = this.tableData[i].status==1?'正常':'下架'
                        this.tableData[i].plateId = this.tableData[i].plateId==1?'喵星人':'汪星人'

                    }


                })

            },

        },created(){
           this.findAll()
        }

    }
</script>

<style>
    .el-popover{
        height: 600px;

        background: white;
    overflow: auto;
    }

</style>